<template>
  <view>
    <form>
      <view class="cu-form-group">
        <view class="title">语言</view>
        <picker :value="index" :range="picker" @change="setFdLanguage">
          <view class="picker">
            {{ index>-1 ? picker[index] : 'language' }}
          </view>
        </picker>
      </view>
      <view class="cu-form-group">
        <view class="title">姓名</view>
        <input placeholder="name" name="name" @input="setFdNickname">
      </view>
      <view class="cu-form-group">
        <view class="title">账号</view>
        <input placeholder="login account" name="username" @input="setFdUsername">
      </view>
      <view class="cu-form-group">
        <view class="title">密码</view>
        <input placeholder="password" name="password" type="password" @input="setFdPassword">
      </view>
      <!-- <view class="cu-form-group">
        <view class="title">联系方式</view>
        <input placeholder="contact information" name="input" @input="setFdEmail">
      </view> -->
      <view class="padding flex flex-direction">
        <button class="cu-btn bg-green margin-tb-sm lg" @click="addUser">注册</button>
      </view>
      <view style="text-align: center;" @click="toLogin">已有账号，去登录</view>
    </form>
    <!-- 提示框 -->
    <view class="cu-modal" :class="modalName=='Modal'?'show':''">
      <view class="cu-dialog">
        <view class="cu-bar bg-white justify-end">
          <view class="content">提示</view>
          <view class="action" @tap="hideModal">
            <text class="cuIcon-close text-red" />
          </view>
        </view>
        <view class="padding-xl">
          {{ modalInfo }}
        </view>
		<view class="padding flex flex-direction">
		  <button class="cu-btn bg-green margin-tb-sm lg" @click="hideModal2">确定</button>
		</view>
      </view>
    </view>

  </view>
</template>

<script>
    import { add } from 'api/curd'
    import { getAllLanguages, registered  } from 'api/signup/index'

    const url = '/student'

    export default {
        data() {
            return {
                login: false,
                modalInfo: undefined,
                modalName: null,
                formDate: {
                    fdNickname: undefined,
                    fdLanguage: undefined,
                    fdUsername: undefined,
                    fdPassword: undefined,
                    fdEmail: undefined
                },
                index: undefined,
                picker: [],
                objectArray: []
            }
        },
        created: function() {
            this.getLanguages()
        },

        methods: {
            // 登录页面跳转
            toLogin() {
                uni.redirectTo({
                    url: '/pages/signup/login'
                })
            },
            showModal(e) {
                this.modalName = e.currentTarget.dataset.target
            },
            hideModal(e) {
                this.modalName = null
                if (this.login) {
                    this.toLogin()
                }
            },
			hideModal2() {
			    this.modalName = null
			},
            setFdLanguage(e) {
                this.index = e.detail.value
                this.formDate.fdLanguage = this.objectArray[e.detail.value]
            },
            setFdNickname: function(event) {
                this.formDate.fdNickname = event.target.value
            },
            setFdUsername: function(event) {
                this.formDate.fdUsername = event.target.value
            },
            setFdPassword: function(event) {
                this.formDate.fdPassword = event.target.value
            },
            setFdEmail: function(event) {
                this.formDate.fdEmail = event.target.value
            },
            // 检查并注册
            addUser() {
                // 设置默认语言
                if (!this.formDate.fdLanguage) {
                    this.index = 0
                    this.formDate.fdLanguage = this.objectArray[0]
                    this.modalName = 'Modal'
                    this.modalInfo = '未填写语言，默认为简体中文！'
					
                    return false
                }

                if (!this.formDate.fdNickname) {
                    this.modalName = 'Modal'
                    this.modalInfo = '请填写姓名！'
                    return false
                }
                if (!this.formDate.fdUsername) {
                    this.modalName = 'Modal'
                    this.modalInfo = '请填写登录账号！'
                    return false
                }
                if (!this.formDate.fdPassword) {
                    this.modalName = 'Modal'
                    this.modalInfo = '请填写登录密码！'
                    return false
                }
                // if (!this.formDate.fdEmail) {
                //     this.modalName = 'Modal'
                //     this.modalInfo = '请填写联系方式！'
                //     return false
                // }
                // 注册
                registered(this.formDate).then(response => {
                    // 页面跳转
                    const { meta } = response
                    if (meta.code === 20000) {
                    	uni.showToast({
                    		title: '注册成功,(●\'◡\'●)',
                    		duration: 2000,
                    		mask: true,
                    		icon: 'success'
                    	})
                        this.login = true
						this.toLogin()
                    } else {
						this.modalName = 'Modal'
						this.modalInfo = meta.message
                    }
                })
            },
            // 获取所有的语言
            getLanguages() {
                getAllLanguages().then(response => {
                    const { data } = response
                    data.forEach(item => {
                        let fdName = item.fdName
                        if (fdName.indexOf('all')) {
                            if (fdName.indexOf('（') > 0) {
                                fdName = fdName.substr(0, fdName.indexOf('（'))
                            }
                            this.picker.push(fdName)
                            this.objectArray.push({ fdId: item.fdId, fdName: fdName })
                        }
                    })
                })
            }
        }
    }
</script>

<style>
    .cu-form-group .title {
        min-width: calc(4em + 15px);
    }
</style>
